"use client";

import { BytemdViewer } from "@/components/Bytemd";
import { Wrapper } from "@/components/Wrapper";
import { useIsMobile } from "@/hooks/use-mobile";
import { getBlogById } from "@/modules/blog";
import { formatDate } from "@/utils";
import classNames from "classnames";
import { useParams } from "next/navigation";
import { useMemo } from "react";

export default function Page() {
  const isMobile = useIsMobile();
  const id = useParams().id;
  const getBlogController = getBlogById(id as string);
  const blog = useMemo(() => {
    return getBlogController.data?.blog;
  }, [getBlogController]);

  return (
    <Wrapper
      className={classNames(
        "flex justify-center !pt-[calc(60px+30px)]",
        isMobile && "px-4"
      )}
    >
      {blog && (
        <div
          className={classNames(
            "h-full flex flex-col items-center justify-center max-w-[900px] bg-white rounded-2xl shadow-sm pb-20",
            isMobile ? "px-4" : "px-20"
          )}
        >
          {/* 标题 */}
          <div className="w-full h-fit text-4xl text-center mt-6 mb-4">
            {blog?.title}
          </div>
          {/* 时间 */}
          <div className="w-full h-fit text-sm text-center mb-4">
            {formatDate(blog?.createdAt!)}
          </div>
          <BytemdViewer value={blog?.content || ""} />
        </div>
      )}
    </Wrapper>
  );
}
